
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=640,user-scalable=0,target-densitydpi=device-dpi">
	<title>bluemembers会员</title>
	<link rel="stylesheet" type="text/css" href="index.css"/>
	<script type="text/javascript" src="http://hbweixin.twomi.cn/api_hb_bluemember/getToken"></script>
</head>
<body>
<img src="images/logo.png" class="logo"/>

<section class="page-0 page page-full page-home show" id="js_page_home">
<img src="images/title.png" class="title" />
<img src="images/home-gift.png" class="home-gift" />
<img src="images/btn-receive.png" class="btn-receive" id="js_btn_home_receive"/>
<em id="js_btn_show_desc">活动说明</em>
</section>

<section class="page-1 page page-full page-login" id="js_page_login">
	<form onsubmit="return false;" class="form-wrap" id="js_form_login">
		<h3>验证手机号，获取刮刮卡</h3>
		<label><input class="form-input" type="tel" name="UserName" placeholder="请输入11位手机号" id="js_input_phone" data-validate="phone" data-errormsg="请输入正确的手机号!"></label>
<!-- 		<label><input class="form-input" type="number" name="code" placeholder="请输入图形验证码"><img class="captcha-img" id="js_img_captcha" src=""/></label> -->
		<label><input class="form-input" type="number" name="Captcha" placeholder="请输入短信验证码" data-validate="smscode" data-errormsg="请输入4位验证码!"><em id="js_btn_get_captcha">获取短信码</em></label>
		<label><input type="checkbox" checked="checked" name="agree" id="js_agree_members"><i>同意成为bluemembers会员</i></label>
		<button type="submit" class="btn-submit">领取卡券</button>
	</form>
</section>

<section class="page-2 page page-full page-scratch" id="js_page_scratch">
	<form onsubmit="return false;" class="form-wrap">
		<h3>刮开涂层获得卡券</h3>
		<div id="scratch">
	        <div id="card" class="card-name"></div>
	    </div>
		<p>数量有限，兑完为止</p>
	</form>
</section>

<section class="page-3 page page-auto page-apply" id="js_page_apply">
	<div class="form-wrap top-gift">
		<h4 class="card-name"></h4>
		<p>恭喜您获得<span class="card-name"></span><br/>请登陆bluemembers【个人中心】- <br/>【我的卡券】查看。 </p>
		<b id="js_btn_show_card">如何找到卡券?</b>
		<button class="btn-submit" id="js_btn_chezhu_auth">认证车主抽大礼</button>
	</div>
	<form onsubmit="return false;" class="form-wrap apply-wrap" id="js_form_apply">
		<h3>填写预约维保信息，立即使用卡券</h3>
		<span><select class="form-input" id="js_car_series">
                <option value="74">领动</option>
                <option value="65">全新途胜</option>
                <option value="52">第九代索纳塔</option>
                <option value="53">ix25</option>
                <option value="54">全新胜达</option>
                <option value="55">朗动</option>
                <option value="56">名图</option>
                <option value="57">瑞纳</option>
                <option value="58">ix35</option>
                <option value="59">途胜</option>
                <option value="60">悦动</option>
                <option value="62">伊兰特</option>
                <option value="63">名驭</option>
                <option value="64">瑞奕</option>
                <option value="66">第八代索纳塔</option>
                <option value="67">i30</option>
                <option value="68">领翔</option>
                <option value="69">御翔</option>
                <option value="70">索纳塔</option>
                <option value="71">雅绅特</option>
		</select></span>
		<div class="clearfix">
			<span><select class="form-input" id="js_apply_province" data-errormsg="请选择省份">
				<option value="1">省份</option>
			</select></span>
			<span><select class="form-input" id="js_apply_city" data-errormsg="请选择城市">
				<option value="1">城市</option>
			</select></span>
		</div>
		<span><select class="form-input" id="js_apply_dealer" data-errormsg="请选择经销商">
			<option value="1">请选择经销商</option>
		</select></span>
		<label><input class="form-input" type="text" name="LicensePlate" placeholder="请输入车牌号" data-validate="required" data-errormsg="请输入车牌号"></label>
		<label class="date-wrap">
			<input class="form-input" type="text" disabled="disabled" name="ScheduleDate" value="2016-09-09" placeholder="请选择预约时间"  data-validate="required" data-errormsg="请选择预约时间">
			<input class="form-input" type="date" name="time-1" id="js_apply_date">
		</label>
		<label><input class="form-input" type="text" name="UserName" placeholder="请输入您的姓名" data-validate="required" data-errormsg="请输入您的姓名"></label>
		<label><input class="form-input" type="tel" name="Phone" placeholder="请输入您的手机号码" data-validate="phone" data-errormsg="请输入您的手机号码"></label>
		<button class="btn-submit">预约维保</button>
	</form>
</section>

<section class="page-5 page page-full page-auth" id="js_page_auth">
	<form onsubmit="return false;" class="form-wrap apply-wrap" id="js_form_auth">
		<h3>认证车主身份</h3>
		<p>认证车主身份可抽取定制好礼，还能享受bluemembers会员专属服务。   </p>
		<ul>
			<li>到店消费返积分</li>
			<li>车辆服务免费享</li>
			<li>生活服务嗨翻天</li>
			<li>积分商城换好礼</li>
		</ul>
		<a href="javascript:void(0);" id="js_btn_show_member"><b>了解更多认证会员专属服务</b></a>

		<label><input class="form-input" type="text" name="identityNumber" placeholder="请输入身份证号"
			 data-validate="identity" data-errormsg="请输入正确的身份证号!"></label>
		<button class="btn-submit">立即认证</button>
	</form>
</section>

<section class="page-4 page page-full page-lottery" id="js_page_lottery">
	<div>
		<img src="images/rotate-bg.png"/>
		<img src="images/rotate-arrow.png" class="arrow" id="js_rotate_arrow"/>
	</div>
	<p>认证成功，点击大转盘<br/>抽取免费幸运大礼！ </p>
	<button class="btn-white" id="js_btn_share_lottery">分享抽奖</button>
</section>

<section class="page-6 page page-full page-address" id="js_page_address">
	<form onsubmit="return false;" class="form-wrap" id="js_form_address">
		<h3>恭喜中奖</h3>
		<p>恭喜获得<i id="js_gift_name">车载净化器</i>一个，奖品将在活动结束后5个工作日内邮寄。 </p>
		<label><input class="form-input" type="text" name="name" placeholder="请输入您的姓名"></label>
		<label><input class="form-input" type="tel" name="phone" placeholder="请输入您的手机号"></label>
		<div class="clearfix">
			<span><select class="form-input">
				<option value="1">省份</option>
				<option value="2">北京</option>
				<option value="3">上海</option>
			</select></span>
			<span><select class="form-input">
				<option value="1">城市</option>
				<option value="2">北京</option>
				<option value="3">上海</option>
			</select></span>
			<span><select class="form-input">
				<option value="1">地区</option>
				<option value="2">北京</option>
				<option value="3">上海</option>
			</select></span>
		</div>
		<label><input class="form-input" type="text" name="address" placeholder="请输入您的详细地址"></label>
		<p>您的个人信息仅用于奖品发放,请放心填写。</p>
		<button class="btn-submit">提交</button>
		<button class="btn-white" type="button" id="js_btn_show_share">分享好友</button>
	</form>
</section>


<div class="mask" id="js_mask">
	<div class="mask-inner"><span id="js_mask_msg"></span>
		<i id="js_mask_close">ⅹ</i></div>
</div>

<div class="mask" id="js_mask_share">
	<img src="images/share-tips.png"/>
</div>

<div class="pop pop-member" id="js_pop_member">
	<i></i>
	<img src="images/pop-member.jpg"/>
</div>

<div class="pop pop-card" id="js_pop_card">
	<i></i>
	<img src="images/pop-card.jpg"/>
</div>

<div class="pop pop-desc" id="js_pop_desc">
	<i></i>
	<em class="action-1" data-index="0"></em>
	<em class="action-2" data-index="1"></em>
	<img src="images/pop-desc-1.jpg" class="img-1"/>
	<img src="images/pop-desc-2.jpg" class="img-2"/>
</div>

<script type="text/javascript" src="index.js"></script>
</body>
</html>